<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RISC-V LLM</title>
</head>
<script>
    async function fetchChat() {
        const textArea = document.getElementById('generated-text');
        const responseSection = document.getElementById('response-section');
        const promptText = textArea.value || 'Hello LLM!'

        const response = await fetch('http://127.0.0.1:8000/api/llm/chat', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ prompt: promptText }),
        })

        const reader = response.body.getReader();
        const decoder = new TextDecoder()
        let events = ""
        for (; ;) {
            const { done, value } = await reader.read()
            const decoded = decoder.decode(value)
            try {
                const partial = JSON.parse(decoded.replace(/^[,\[\]\n]*/g, '').replace(/[,\[\]\n]*$/g, ''))
                document.getElementById('generated-text').value += partial.generated_text
            } catch (err) {
                console.warn('Not valid json!', decoded, err)
            }
            events += decoded
            if (done) break;
        }
        return events;
    }

    async function generate() {
        try {
            const events = await fetchChat()
            const full = JSON.parse(events)
            console.log(full)
            const htmlText = `<pre><code>${JSON.stringify(full, null, 4)}</code></pre>`
            document.getElementById('response-section').innerHTML = htmlText
        } catch (error) {
            console.error('Error when starting process:', error)
        }
    }

</script>

<body>
    <label for="generated-text">
        <h1>Chat Demo</h1>
    </label>
    <div>
        <textarea id="generated-text" name="generated-text" rows="4" cols="50"></textarea>
    </div>
    <button id="btn_generate" onclick="generate()">Generate</button>
    <div id="response-section"></div>
</body>

</html>